<template>
    <div id="app">
        <!-- 未登录 且 未加入购物车 -->
        <div style="display:none" class="no_box">
            <!-- 提示登陆 -->
            <div class="sub_box">
                <span>登录可同步购物车内商品</span>
                <span>登录</span>
            </div>
            <!-- 购物car -->
            <div class="goodsCar_box">
                <div class="img"></div>
                <p>购物车空空的，快去逛逛吧！</p>
                <div>去逛逛</div>
            </div>
            
        </div>
        <!-- 购物车商品 -->
        <div v-for="(item,index) in carList" :key="index" class="car_box">
            <div class="img"><img :src="item.url" alt=""></div>
            <div @click="isSelect(index)" class="check">
                <img :src="item.isSelect?'https://i.loli.net/2021/06/03/L43RpFtVrZuHb1S.png':'https://i.loli.net/2021/06/03/MFpzCfTJ6hqwE23.png'" alt="">
            </div>
            <div class="text">
                <span>{{item.goodsTitle}}</span>
                <span>￥{{item.totalPrice}}</span>
            </div>
            <div @click="cutOut(index)" class="delete"><img src="https://i.loli.net/2021/06/03/FOfBPqg1ks5tAHR.png" alt=""></div>
            <div class="num">
                <div @click="sub(item)" class="cut">-</div>
                <div class="number">{{item.num}}</div>
                <div @click="add(item)" class="add">+</div>
            </div>
        </div>

        <!-- 计算价格 -->
        <div class="cprice_box">
            <!-- 全选 -->
            <div class="isAll_box">
                <span @click="SelectAll">
                    <img :src="isSelectAll?'https://i.loli.net/2021/06/03/L43RpFtVrZuHb1S.png':'https://i.loli.net/2021/06/03/MFpzCfTJ6hqwE23.png'" alt="">
                </span>
                <span style="margin-left: 5px;">全选</span>
            </div>
            <!-- 优惠 & 价格 -->
            <div class="price_box">
                <span class="yun">合计(不含运费)：<span>￥{{price}}</span></span>
                <span class="you">已优惠: ￥0.00</span>
            </div>
            <!-- 去结算 -->
            <div class="goShopping" :style="select?'background:red':'background:#ccc'">去结算(<span class="money">{{price}}</span>)</div>
        </div>
    </div>
</template>

<script>

export default({
    data(){
        return{
            carList:[],//状态管理器数据
        }
    },
    computed:{
        //总价
        price(){
            //判断商品选中状态，进行添值
            return this.$store.state.carList.reduce((price,goods)=>goods.isSelect?price+parseFloat(goods.totalPrice):price,0);
        },
        //全选状态
        isSelectAll(){
            return this.$store.state.carList.every(goods=>goods.isSelect)
        },
        //单选状态
        select(){
            let isRed = false;
            this.carList.forEach((item)=>{
                if(item.isSelect){
                    isRed = true
                }else{
                    isRed = false
                }
            })
            return isRed;
        }
    },
    methods:{
        //总价
        s(){
            return this.$store.state.carList.reduce((price,goods)=>price+parseFloat(goods.totalPrice),0);
        },
        //增加
        add(item){
            //更新到状态管理器中
            console.log(item)
            this.$store.state.isAds = true;
            this.$store.commit("carStore",item);
            //更新总价
            this.s()
        },
        //减少
        sub(item){
            //更新到状态管理器中
            this.$store.state.isAds = false;
            this.$store.commit("carStore",item);
            //更新总价
            this.s()
        },
        //删除
        cutOut(index){
            //删除本地存储数据
            this.carList.splice(index,1);
            //更新本地
            localStorage.setItem('carList',JSON.stringify(this.carList));
            this.$store.state.carNum = JSON.parse(localStorage.getItem("carList")).reduce((temp,goods)=>temp+goods.num,0)
            console.log(this.$store.state.carNum)
        },
        //选中
        isSelect(index){
            //改变状态
            this.carList[index].isSelect = !this.carList[index].isSelect;
            //更新本地
            localStorage.setItem('carList',JSON.stringify(this.carList));
        },
        //全选
        SelectAll(){
            this.isSelectAll?this.carList.forEach((item)=>{item.isSelect = false;}):this.carList.forEach((item)=>{item.isSelect = true;})
        }
        
    },
    created(){
        //刷新页面一次
        if(location.href.indexOf('#reloaded') == -1){
            location.href = location.href + "#reloaded";
            location.reload();
        }
        //更新carList数据
        this.carList = this.$store.state.carList;
    }
})
</script>

<style scoped>
    #app{
        width: 100%;
        height: 667px;
        background: #f4f4f4;
        padding-bottom: 90px;
    }
    .sub_box{
        width: 100%;
        height: 40px;
        background: #fff;
        display: flex;
        justify-content: center;
        color: #808080;
    }
    .sub_box span{
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sub_box :nth-of-type(2){
        margin-top: 10px;
        width: 46px;
        height: 18px;
        padding: .01rem;
        border: 1px solid #c0c0c0;
        border-radius: .1rem;
        margin-left: 10px;
    }
    .goodsCar_box{
        width: 100%;
        height: 308px;
        background: #fff;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .goodsCar_box .img{
        margin-top: 54px;
        width: 108px;
        height: 108px;
        background: url("https://i.loli.net/2021/06/03/L43RpFtVrZuHb1S.png") no-repeat center;
        background-size: 100% 100%;
    }
    .goodsCar_box p{
        color: #808080;
        margin: 20px 0 15px 0;
    }
    .goodsCar_box :last-child{
        width: 135px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #11b57c;
        border-radius: .15rem;
        font-size: 15px;
        color: #11b57c;
    }
    .cprice_box{
        position: fixed;
        bottom: 47px;
        width: 100%;
        height: 48px;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .isAll_box{
        display: flex;
        margin-left: 10px;
    }
    .isAll_box :nth-of-type(1) img{
        width: 18px;
        height: 18px;
    }
    .price_box{
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        margin-left: 19.5555%;
        margin-right: 5px;
    }
    .you{
        margin-top: 2px;
        font-size: 11px;
        color: #999;
    }
    .goShopping{
        width: 108px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #fff;
    }
    .yun span{
        font-size: 13px;
        color: #fb3d3d;
    }
    .car_box{
        width: 90%;
        height: 81px;
        padding: 9.5px 0 9.5px 10%;
        background: #fff;
        display: flex;
        position: relative;
        margin-top: 10px;
    }
    .car_box img{
        width: 81px;
        height: 81px;
    }
    .check img{
        position: absolute;
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
        width: 18.5px;
        height: 18.5px;
    }
    .text{
        width: 200px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .text :nth-of-type(1){
        font-size: 12.5px;
    }
    .text :nth-of-type(2){
        color: #fb3d3d;
    }
    .delete img{
        width: 15px;
        height: 15px;
        margin-top: 15px;
    }
    .num{
        width: 78.5px;
        height: 21.5px;
        display: flex;
        border: 1px solid #ddd;
        border-radius: .2rem;
        position: absolute;
        right: 25px;
        bottom: 10px;
    }
    .num div{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .number{
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }
    .cut{
        font-size: 18px;
        color: #bababa;
    }
    .add{
        font-size: 18px;
        color: #bababa;
    }
</style>